<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../lib/bootstrap-table/dist/bootstrap-table.min.css">
  <link rel="stylesheet" href="../lib/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css"/>
  <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
  <title>bootstrap-admin后台管理模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-body py-3">
      <form class="row row-cols-sm-auto g-3 align-items-center" action="#">
        <div class="col-12">
          <div class="row">
            <label for="name" class="col-sm-auto col-form-label">导师姓名</label>
            <div class="col">
              <input type="text" class="form-control" id="name" name="name">
            </div>
          </div>
        </div>

        <div class="col-12 gap-2">
          <button type="button" class="btn btn-light bsa-querySearch-btn">
            <i class="bi bi-search"></i>搜索
          </button>
          <button type="button" class="btn btn-light bsa-reset-btn">
            <i class="bi bi-arrow-clockwise"></i>重置
          </button>
        </div>
      </form>
    </div>
    <div class="card-body">
      <div id="toolbar" class="d-flex flex-wrap gap-2 mb-2">
        <!-- 删除 "新增" 和 "批量删除" 按钮 -->
        <button class="btn btn-light"><i class="bi bi-box-arrow-down"></i> 导入</button>
        <button class="btn btn-light"><i class="bi bi-box-arrow-up"></i> 导出</button>
      </div>
      <table id="table"></table>
    </div>
  </div>
</div>
<!--回到顶部开始-->
<a href="javascript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../lib/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
<script src="../lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>

<script>
  $(function () {
    $('#table').bootstrapTable({
      locale: 'zh-CN', // 配置语言
      url: 'http://127.0.0.1:8000/tea/', // 指向后端获取导师信息的接口
      responseHandler: function (res) {
        return res.teachers_info; // 提取返回数据中的教师信息列表
      },
      pagination: true, // 是否开启分页
      sidePagination: 'server', // 作服务器端分页
      pageNumber: 1, // 初始化加载第一页
      pageSize: 5, // 默认显示几条
      pageList: [5, 10, 25, 50, 100], // 可供选择的每页的行数
      uniqueId: 'instructorid', // 唯一ID字段
      clickToSelect: true, // 是否启用点击选中行
      toolbar: '#toolbar', // 工具按钮容器
      showColumns: true, // 是否显示所有的列
      showRefresh: true, // 是否显示刷新按钮
      iconsPrefix: 'bi', // 图标前缀

      // 列定义
      columns: [
        {
          checkbox: true, // 是否显示复选框
        },
        {
          title: '导师ID',
          field: 'instructorid', // 后端返回的字段名
          align: 'center',
          sortable: true,
        },
        {
          title: '导师姓名',
          field: 'instructorname', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '导师简介',
          field: 'instructorbio', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '邮箱',
          field: 'instructoremail', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '电话',
          field: 'instructorphone', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '教授科目',
          field: 'instructorsubject', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '导师类型',
          field: 'instructortype', // 后端返回的字段名
          align: 'center'
        },
        {
          title: '职称',
          field: 'instructortitle', // 后端返回的字段名
          align: 'center'
        }
      ]
    });

    // 搜索处理
    $('.bsa-querySearch-btn').on('click', function () {
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1); // 跳转到第一页
    });

    // 重置处理
    $('.bsa-reset-btn').on('click', function () {
      $('#name').val(''); // 恢复默认值
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1); // 跳转到第一页
    });
  });
</script>

</body>
</html>
